<template>
	<view class="container">
		<!-- <view class="header">
			<view class="subsection">
				<view :class=" index == subsectionCurrent?'subItem subItemCur':'subItem' " @click="subsectionChange(index)" v-for="(item, index) in subsectionList" :key="index">
					{{ item.name }}
				</view>
			</view>
		</view> -->
		<view class="wrapper">
			<view class="main" >
				<scroll-view class="scroll" :scroll-y="true" :scroll-top="scrollTop" :show-scrollbar="false"
					:refresher-threshold="50" :refresher-triggered="refreshStatus" :lower-threshold="100"
					:scroll-with-animation="true" refresher-enabled="true" @refresherrefresh="onRefreshData"
					@scrolltolower="onLoadData" @scroll="onScroll">
					
					
					<view class="column">
						<view style="margin-top: 10rpx;margin-bottom: 20rpx;background-color: #ffffff;" v-for="item in list" :key="item.id">
							<view class="item">
								<view class="avatar">
									<image :src="item.img" mode="aspectFill"></image>
									<view class="price">￥<text>{{item.purchaseCost}}</text></view>
								</view>
								<view class="details">
									<view class="title">
										<view class="label">{{item.courseName}}</view>
										<view class="status">
											<text v-if="item.effectiveStatus === 0">已失效</text>
											<text v-else class="active">可购买</text>
										</view>
									</view>
									<view class="time">购买截止时间：{{item.lastBuyTime}}</view>
									<view class="time">开课时间：{{item.effectiveDate}} {{item.effectiveTime}}</view>
									<view class="time">购买/开课人数：<text>{{item.buyCount}}</text>/ {{item.maxPeople}}</view>
									<view class="rating">评分<text>{{item.rating || '5.0'}}分</text></view>
								</view>
							</view>
							
							<view style="border-top: 1px solid #e5e5e5;padding: 20rpx 10rpx 20rpx 10rpx;">
								<u-grid :border="true" :col="2">
									<u-grid-item >
										<text style="font-size: 31rpx;" @click="delCourse(item.id)">删除</text>
									</u-grid-item >
									<u-grid-item >
										<text style="font-size: 31rpx;" @click="editCourse(item.id)">编辑</text>
									</u-grid-item >
								</u-grid>
							</view>
						</view>
						
						
					</view>
					
					<view class="nullData" v-if="page == 1 && list.length <=0">
						<view>
							<view>
								<image src="../../../static/image/notdata.png" class="nullImage"></image>
							</view>
							<view class="nullText">
								暂无记录
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view style="height: 140rpx;background-color: #ffffff;position: fixed;bottom: 0px;width: 100%; ">
			<view style="padding:30rpx">
				<u-button text="新增课程" @click="addVenueLocation" color="#155CCF"></u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//当前页数
				page: 1,
				//每页显示条数
				size: 10,
				//列表数据
				list: [],
				//总页数
				pages: 0,
				//监听滚动
				scrollTop: 0,
				realScrollTop: 0,
				refreshStatus: false,
				/**当前选择的状态序号**/
				subsectionCurrent: 0,
				/**状态分段**/
				subsectionList: [
					{status: '',name: '全部'},
					{status: '0',name: '未开始'},
					{status: '1',name: '进行中'},
					{status: '2',name: '已完成'}
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.fetchList();
		},
		methods: {
			// 获取课程记录
			fetchList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				var params = {};
				params.current = this.page;
				params.size = this.size;
				var status = this.subsectionList[this.subsectionCurrent].status;
				if(status){
					params.status = status;
				}
				
				//身份（1：普通用户，2：场馆主，3：教练员，4：指导员，5：体检中心）
				var identity = uni.getStorageSync('identity');
				if(identity == 2) {
					params.type = 1;
					params.venueId = uni.getStorageSync('venueId');
				} else {
					params.type = 2;
				}
				this.$request({
					url: '/blade-merchant-app/merchant-app/course/list',
					data: params
				}).then(res => {
					const {
						records = [],
							pages
					} = res.data;
					
					if (this.page === 1) {
						this.list = records;
					} else {
						this.list = this.list.concat(records);
					}
					this.pages = pages || 0;
					setTimeout(() => {
						this.refreshStatus = false;
						uni.hideLoading();
					}, 300);
				})
			},
			// 监听滚动事件
			onScroll(e) {
				this.realScrollTop = e.detail.scrollTop;
			},
			// 刷新数据
			onRefreshData() {
				this.refreshStatus = true;
				this.page = 1;
				this.list = [];
				this.fetchList();
			},
			// 加载数据
			onLoadData() {
				if (this.page < this.pages) {
					this.page += 1;
					this.fetchList();
				}
			},
			//新增课程
			addVenueLocation(){
				var venueId = uni.getStorageSync('venueId');
				var identity = uni.getStorageSync('identity');
				console.log(venueId,identity);
				if((!venueId) && identity==2){
					uni.showModal({
					   title: '无法新增课程',
					   content: '您暂未申请场馆，请申请场馆且审核通过后重试',
					   showCancel: false,
					   success: function (res) {}
					});
				} else {
					this.onLink('/pagesWorkbenches/pages/course/mainten/mainten')
				} 
			},
			//删除场地
			delCourse(id) {
				var that = this;
				uni.showModal({
				   title: '课程删除操作',
				   content: '是否确认删除此课程，删除后不可恢复？',
				   showCancel: true,
				   success: function (res) {
					   if (res.confirm) {
							uni.showLoading({
								title: '删除中',
								mask: true
							})
							that.$request({
								url: `/blade-merchant-app/merchant-app/course/remove?ids=${id}`,
								type: 'POST',
								data: {
									ids: id
								}
							}).then(res => {
								setTimeout(()=>{
									uni.hideLoading();
									that.fetchList();
								},800)
							}).catch(err =>{
								uni.hideLoading();
							})
					   }
				   }
				});
			},
			//编辑课程
			editCourse(id) {
				this.onLink('/pagesWorkbenches/pages/course/mainten/mainten?courseId='+id)
			},
			//预约场地费用
			reservationCostLoction(id) {
				
			},
			//场地状态变更 operateStatus：1营业 其他未营业
			statusLoction(id, operateStatus) {
				uni.showLoading({
					title: '切换中',
					mask: true
				})
				var _url = '/blade-merchant-app/merchant-app/venue-location/enable?ids='+id;//启用
				if(operateStatus == 1){
					_url = '/blade-merchant-app/merchant-app/venue-location/disabled?ids='+id;//闭场
				}
				this.$request({
					url: _url,
					type: 'POST',
					data: {
						ids: id
					}
				}).then(res => {
					setTimeout(()=>{
						uni.hideLoading();
						if(operateStatus == 1){
							uni.$u.toast("场地成功关闭")
						} else {
							uni.$u.toast("场地成功开启运营")
						}
						this.fetchList();
					},800)
				}).catch(err =>{
					uni.hideLoading();
				})
			},
			//状态栏切换事件
			subsectionChange(e){
				this.subsectionCurrent = e;
				this.onRefreshData();
			},
			onLink(path) {
				uni.navigateTo({
					url: path
				})
			},
		}
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		overflow: hidden;
		background: #f1f1f1;

		.container {
			height: 100%;
			
			

			.wrapper {
				display: flex;
				flex-direction: column;
				height: calc(100% - 140rpx);

				.main {
					flex: 1;
					height: 100%;

					.scroll {
						height: 100%;

							.column {
								padding: 0rpx;
								
							
								.item {
									display: flex;
									flex-direction: row;
									padding: 25rpx 30rpx 20rpx 30rpx;
									font-size: 24rpx;
							
									.avatar {
										position: relative;
										overflow: hidden;
							
										image {
											display: block;
											width: 224rpx;
											height: 224rpx;
											border-radius: 8rpx;
										}
							
										.price {
											position: absolute;
											top: 184rpx;
											left: 0;
											right: 0;
											font-size: 24rpx;
											color: #fff;
											line-height: 40rpx;
											text-align: center;
											background-color: rgba(0, 0, 0, .5);
										}
									}
							
									.details {
										flex: 1;
										padding-left: 16rpx;
										font-size: 24rpx;
										overflow: hidden;
							
										.title {
											display: flex;
											flex-direction: row;
											align-items: center;
							
											.label {
												flex: 1;
												font-size: 32rpx;
												color: #040404;
												line-height: 44rpx;
												text-overflow: ellipsis;
												white-space: nowrap;
												overflow: hidden;
											}
							
											.status {
												padding-left: 10rpx;
												color: #999;
							
												.active {
													color: #149BFF;
												}
											}
										}
							
										.name {
											margin-top: 10rpx;
											padding-bottom: 10rpx;
											color: #666;
										}
										
										.time {
											margin-top: 8rpx;
											color: #666;
											line-height: 34rpx;
							
											text {
												padding-right: 8rpx;
												font-size: 28rpx;
												color: #149BFF;
											}
										}
							
										.rating {
											margin-top: 10rpx;
											color: #999;
											line-height: 44rpx;
							
											text {
												padding-left: 10rpx;
												font-size: 32rpx;
												color: #FE9C38;
											}
										}
									}
							
									&:last-child {
										border-bottom: 0;
									}
								}
							}
					}
				}
			}
		}
		
		.nullData {
			height: 100%;
			display: flex;
			-webkit-box-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			align-items: center;
			
			.nullImage {
				width: 120px;height: 120px;
			}
			.nullText {
				color:#666666;font-size:29rpx;padding-top:15rpx;text-align: center;
			}
			
		}
	}
	
</style>
